<template>
  <div class="building-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="一体杆名称">
          <el-input v-model="formInline.poleName" placeholder="请输入一体杆名称" />
        </el-form-item>
        <el-form-item label="一体杆编号">
          <el-input v-model="formInline.poleNumber" placeholder="请输入一体杆编号" />
        </el-form-item>
        <el-form-item label="运行状态">
          <el-select v-model="formInline.poleStatus" placeholder="请选择运行状态">
            <el-option label="全部" value="" />
            <el-option label="正常" value="0" />
            <el-option label="异常" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="inquireADD">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog
      :title="addForm.id?'编辑一体杆':'添加一体杆'"
      :visible="dialogVisible"
      width="580px"
      @close="closeDialog"
    >
      <div class="form-container">
        <el-form ref="addForm" :model="addForm" :rules="addFormRules">
          <el-form-item label="一体杆名称" prop="poleName">
            <el-input v-model="addForm.poleName" />
          </el-form-item>
          <el-form-item label="一体杆编号" prop="poleNumber">
            <el-input v-model="addForm.poleNumber" />
          </el-form-item>
          <el-form-item label="一体杆IP" prop="poleIp">
            <el-input v-model="addForm.poleIp" />
          </el-form-item>
          <el-form-item label="关联区域" prop="areaId">
            <el-select v-model="addForm.areaId" placeholder="请选择关联区域">
              <el-option v-for="(item,index) in liebiaoList" :key="index" :label="item.areaName" :value="item.areaId" />
            </el-select>
          </el-form-item>
          <el-form-item label="一体杆类型" prop="poleType">
            <el-select v-model="addForm.poleType" placeholder="请选择一体杆类型">
              <el-option label="入口" value="entrance" />
              <el-option label="出口" value="export" />
            </el-select></el-form-item>
        </el-form>
      </div>
      <template #footer>
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="confirmAdd">确 定</el-button>
      </template>
    </el-dialog>
    <el-button type="primary" @click="addAPP">添加一体杆</el-button>
    <el-button @click="Delabout(deleteList)">批量删除</el-button>

    <!-- 表格区域 -->
    <div class="table">
      <el-table
        style="width: 100%"
        :data="liebiaoList"
        @selection-change="quanxuan"
      >
        <el-table-column

          type="selection"
          width="55"
        />
        <el-table-column
          type="index"
          label="序号"
        />
        <el-table-column
          label="一体杆名称"
          width="180"
          prop="poleName"
        />
        <el-table-column
          label="一体杆编号"
          prop="poleNumber"
        />
        <el-table-column
          label="一体杆IP"
          width="120"
          prop="poleIp"
        />
        <el-table-column
          label="安装区域"
          width="120"
          prop="areaId"
        />
        <el-table-column
          label="一体杆类型"
          width="120"
          prop="poleType"
        >
          <template #default="scope">
            {{ formate(scope.row.poleType) }}
          </template>
        </el-table-column>
        <el-table-column
          label="运行状态"
          prop="poleStatus"
        >
          <template #default="scope">
            {{ formater(scope.row.poleStatus) }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
        >
          <template #default="scope">
            <el-button
              size="mini"
              type="text"
              @click="Editabout(scope.row)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="text"
              @click="Delabout(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column></el-table>
    </div>
    <el-pagination
      layout="total, prev, pager, next"
      :total="total"
      :page-size="formInline.pageSize"
      @current-change="pageChange"
    />
  </div>
</template>

<script>
import { getLibiaoAPI, getTianjiaAPI, getdelaboutAPI, geteditAPI } from '@/api/yitihua'
export default {
  name: 'Building',
  data() {
    return {
      addForm: {
        poleName: '',
        poleNumber: null,
        poleIp: null,
        areaId: null,
        poleType: null
      },
      // 表单验证
      addFormRules: {
        poleName: [
          { required: true, message: '请输入一体杆名称', trigger: 'blur' }
        ],
        poleNumber: [
          { required: true, message: '请输入一体杆编号', trigger: 'blur' }
        ],
        poleIp: [
          { required: true, message: '请输入一体杆IP', trigger: 'blur' }
        ],
        areaId: [
          { required: true, message: '请输入关联区域', trigger: 'blur' }
        ],
        poleType: [
          { required: true, message: '请输入一体杆类型', trigger: 'blur' }
        ]
      },

      formInline: {
        page: 1,
        pageSize: 10,
        poleName: null,
        poleNumber: null,
        poleStatus: null

      },
      liebiaoList: [],
      total: 0,
      dialogVisible: false,
      deleteList: []
    }
  },
  mounted() {
    this.getliebiaoList()
  },
  methods: {
    // 编辑
    Editabout(row) {
      this.dialogVisible = true
      const { poleName, poleNumber, poleIp, areaId, poleType, id } = row
      this.addForm = {
        poleName, poleNumber, poleIp, areaId, poleType, id
      }
    },
    // 删除
    async Delabout(id) {
      this.$confirm('确认删除该企业吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // console.log(id)
        await getdelaboutAPI(id.toString())
        this.getliebiaoList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
    },
    quanxuan(val) {
      // console.log(val)
      this.deleteList = val.map(item => item.id)
      // console.log(this.deleteList)
    },
    // 查询
    inquireADD() {
      this.getliebiaoList()
    },
    // 数据
    async getliebiaoList() {
      const res = await getLibiaoAPI(this.formInline)
      this.liebiaoList = res.data.rows
      // console.log(this.liebiaoList)
      this.total = res.data.total
    },
    formate(status) {
      // 类型
      const MAP = {
        entrance: '入口',
        export: '出口',
        center: '中心'
      }
      return MAP[status]
    },
    // 状态
    formater(obj) {
      const MAP = {
        0: '正常',
        1: '异常'
      }
      return MAP[obj]
    },
    // 分页
    pageChange(page) {
      // 更改参数
      this.formInline.page = page
      // 重新获取数据渲染
      this.getliebiaoList()
    },
    // 添加
    addAPP() {
      this.dialogVisible = true
    },
    closeDialog() {
      this.dialogVisible = false
      this.$refs.addForm.resetFields()
      this.$refs.addForm.clearValidate()
      this.addForm = {
        poleName: '',
        poleNumber: null,
        poleIp: null,
        areaId: null,
        poleType: null
      }
    },
    confirmAdd() {
      this.$refs.addForm.validate(async(valid) => {
        if (this.addForm.id) {
          // 区分编辑和添加
          await geteditAPI(this.addForm)
        } else {
          await getTianjiaAPI(this.addForm)
        }
        this.getliebiaoList()
        this.dialogVisible = false
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.department-container{
  padding:10px;
}
.search-container{
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237,237,237,.9);;
  padding-bottom: 20px;
  .search-label{
    width:100px;
  }
  .search-main{
    width: 220px;
    margin-right: 10px;
  }

}
.el-form{
 .el-select{
 width: 100%;
 }
}
</style>

